<!DOCTYPE html>
<html>
<meta http-equiv= "Content-Type" content= "text/html"; charset= "utf-8" />
<head>
    <title></title>
</head>
<style type="text/css">
ul,li{list-style:none}
.choise{
    float: left;
    margin-left: 5px;
    width: 64px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    font-size: 13px;
    border: 1px solid #dcdcdc;
    background: #fff;
    cursor: pointer;
}
.choise:hover{
    background-color: rgb(65,144,133);
    color: #fff;
}
.cactive{
    background-color: rgb(65,144,133);
    color: #fff;
}
</style>
<body>
<ul>
    <li class="choise cactive" id="btn2" value="2">最新发布</li>
    <li class="choise" id="btn3" value="3">未学习</li>
    <li class="choise" id="btn4" value="4">未学完</li>
    <li class="choise" id="btn5" value="5">已学完</li>
    <li class="choise" id="btn6" value="6">满意度</li>
</ul>
</body>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    // for(var i=1;i<6;i++){
    //     alert(i);
    //     $("#btn"+i).click(function(){
    //         alert(i);
    //     });
    // }
    var lis = $('ul li');//根据自己实际情况获取所有li   
    lis.click(function(){  
        lis.removeClass("cactive");  
        $(this).addClass("cactive");  
        var value=$(this).val();
        alert(value);
    });  
</script>
</html>